<template>
	<div>
		<smpPanel>
			<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
				<el-row>
						<el-col :span="22">
							<el-col :span="8">
								<el-form-item label="系统编号:">
									<el-input v-model="query.body.systemNo" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>

							<el-col :span="8">
								<el-form-item label="系统名称:">
									<el-input v-model="query.body.systemName" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>

							<el-col :span="8">
								<el-form-item label="系统简称:">
									<el-input v-model="query.body.systemShort" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>

							<el-col :span="8">
								<el-form-item label="系统负责人:">
									<el-select v-model="query.body.systemResponsibleMan" style="width: 100%" filterable
										remote clearable reserve-keyword placeholder="系统负责人" :remote-method="getUsers"
										@change="getList">
										<el-option v-for="item in userList" :key="item.userName"
											:label="item.userChineseName" :value="item.userName">
											<span
												style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
											<span
												style="float: right;margin-right: 3px;">{{ $store.getters.getUser(item.userName).orgName }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>


							<el-col :span="8">
								<el-form-item label="所属机构:">
									<el-select v-model="query.body.systemOrg" filterable style="width: 100%" placeholder="所属机构"
										@change="getList">
										<el-option v-for="item in orgListAll" :key="item.seqCate" :label="item.orgName"
											:value="item.seqCate">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>


							<el-col :span="8">
								<el-form-item label="系统类型:">
									<el-select v-model="query.body.systemType" style="width: 100%" placeholder="系统类型"
										@change="getList">
										<el-option v-for="item in dict('SMP0014')" :key="item.itemCode"
											:label="item.itemName" :value="item.itemCode">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-col>


						<el-col :span="2">
							<searchButtonGroup @search="onSubmit" @reset="reset" />
						</el-col>

				</el-row>
			</el-form>
		</smpPanel>


		<smpPanel title="系统列表">
			<createButton slot="option" v-if="vaildPermission('SA0001')" @click="addSystem" title="添加" />


			<!-- <div class="smp-result smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">系统列表</div>
				<div class="smp-panel_option">
				<el-button  v-if="vaildPermission('SA0001')" size="mini" plain type="primary" @click="addSystem">
					<i class="el-icon-circle-plus-outline"></i>
					添加</el-button>
					 <el-button size="mini" plain type="success" @click="exportSelect"><i class="el-icon-download"></i>
						&nbsp;导&nbsp;&nbsp;&nbsp;&nbsp;出&nbsp;</el-button>
					<el-button size="mini" plain type="success" @click="exportAll" :disabled="exportAllDisable"><i
							class="el-icon-download"></i>导出全部</el-button> 
				</div>
			</div>
			<div class="smp_panel_body"> -->
			<el-table :data="list" size="mini" stripe style="width: 100%">

				<el-table-column prop="systemName" label="系统名称" align="center" />
				<el-table-column prop="systemNo" label="系统编号" align="center" />
				<el-table-column prop="systemType" label="系统类型" align="center">
					<template slot-scope="scope">
						{{scope.row.systemType|dictName("SMP0014")}}
					</template>
				</el-table-column>
				<el-table-column prop="systemOrg" label="所属机构" align="center">
					<template slot-scope="scope">
						{{scope.row.systemOrg|getOrgNameByOrgCode}}
					</template>
				</el-table-column>
				<el-table-column prop="systemShort" label="系统简称" align="center" />
				<el-table-column prop="systemResponsibleMan" label="负责人" align="center">
					<template slot-scope="scope">
						<userCard :user="$store.getters.getUser(scope.row.systemResponsibleMan)"
							v-if="scope.row.systemResponsibleMan!=null"></userCard>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="testAddr" label="测试应用IP" align="center" />		
				<el-table-column prop="esbAddr" label="关联ESB测试IP" width="150" align="center" />				
				<el-table-column prop="prodAddr" label="生产应用IP"  align="center" />	 -->
				<el-table-column prop="associatedRequirement" label="关联需求号" align="center" />
				<el-table-column prop="msgAgreement" label="默认报文格式" align="center" />
				<el-table-column prop="msgCode" label="默认报文编码" align="center">
					<template slot-scope="scope">
						{{scope.row.msgCode|dictName("SMP0004")}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="handleEdit(scope.$index, scope.row)" v-if="vaildPermission('SA0001')">修改</el-link>

						<el-divider direction="vertical" v-if="vaildPermission('SA0001')"></el-divider>
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="handleDetails(scope.$index, scope.row)">详情</el-link>

						<el-divider direction="vertical"></el-divider>

						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="exportSystem(scope.$index, scope.row)">导出</el-link>
						<el-divider direction="vertical" v-if="vaildPermission('SA0006')"></el-divider>

						<el-link v-if="vaildPermission('SA0006')" size="mini" type="primary" :underline="false"
							style="font-size: 12px;" @click="handleEdit1(scope.$index, scope.row)">删除</el-link>
					</template>
				</el-table-column>

			</el-table>
			<add ref="add" @onSubmit="onSubmit" />
			<edit ref="edit" @onSubmit="onSubmit" />
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background size="mini" layout="total,sizes,prev, pager, next,jumper"
					:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum"
					@current-change="currentChange" @size-change="sizeChange">
				</el-pagination>
			</div>
		</smpPanel>

	</div>
</template>

<script>
	"use strict";
	import {
		getSystemInfoByPageNew,
		exportSystem,
		deteleSystem
	} from '@/api/service.js';
	import add from './add';
	import edit from './edit';

	export default {

		components: {
			add,
			edit
		},
		data() {
			return {

				total: 0,

				list: [],

				query: {
					body: {
						systemNo: '',
						systemName: '',
						systemShort: '',
						systemResponsibleMan: '',
						systemOrg: ''
					},
					pageNum: 1,
					pageSize: 5
				},

			};



		},

		created() {
			Object.assign(this.query.body, this.$route.query);
			if (this.$route.query.pageNum != undefined) {
				this.query.pageNum = this.$route.query.pageNum;
			}
			if (this.$route.query.pageSize != undefined) {
				this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},

		methods: {


			onSubmit() {
				this.query.pageNum = 1;
				this.getList();
			},

			refresh() {

				this.getList();
			},


			addSystem() {

				this.$refs.add.showDialog();
			},

			handleEdit(index, row) {
				let row1 = {};
				Object.assign(row1, row);
				this.$refs.edit.showDialog(row1);
			},

			exportSystem(index, row) {
				const loading = this.$loading({
					lock: true,
					text: '数据处理中，请耐心等待',
					spinner: 'el-icon-loading'
				})
				exportSystem(row).then(res => {
					loading.close();
					let name = row.systemName + ".xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: row.systemName + ".xlsx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);

					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},

			handleDetails(index, row) {
				this.$router.push({
					name: 'systemDetails',
					query: Object.assign(row)
				})
			},

			reset(form) {
				this.query.body = {}
			},

			getList() {
				getSystemInfoByPageNew(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;

					let query = {};
					Object.assign(query, this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					})
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},

			//删除
			handleEdit1(index, row) {
				this.$confirm('确认删除此系统吗？', '提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						deteleSystem({
							"systemNo": row.systemNo
						}).then(response => {
							if (response.data.code == "0000") {
								this.$message.success(response.data.message);
							} else {
								this.$message.error(response.data.message);
							}
							this.getList();
						}).catch(error => {
							console.info("失败");
							console.info(error.message);
						});
					})
					.catch(() => {
						this.$message({
							duration: 5000,
							type: 'info',
							message: '已取消删除'
						});
					});
			},


		},


	}
</script>

<style>
</style>
